<template>
    <div class="page goodsPage">

        <div class="page-waprrer" style="overflow: hidden">

            <Scroll  @flick-left="goback">

                <div>

                    <swiper class="goods-swiper" :options="swiperOptions">
                        <template v-for="item in swiperList">
                          <div :href="item.replace(/\\/,'/')" class="img-viwer swiper-slide">
                            <img :src="item.replace(/\\/,'/')" alt="">
                          </div>
                        </template>
                        <div class="swiper-pagination"  slot="pagination"></div>
                    </swiper>

                    <div class="goods-inforBox">

                       <h3 class="goods-inforBox-title">{{infor.name}}</h3>

                       <div class="goods-inforBox-price">

                          <span class="price-title">
                              采购价
                          </span>

                          <span class="price-num">{{infor.shop_price}}</span>

                       </div>

                       <div class="goods-inforBox-note">

                          <ul class="note-list">

                            <li class="note-item">
                                <span class="note-title">
                                     款号
                                </span>
                                <span class="note-text">
                                         {{infor.sn}}
                                    </span>
                            </li>

                            <li class="note-item">
                                <span class="note-title">
                                     吊牌价
                                </span>
                                <span class="note-text">
                                         {{infor.market_price}}
                                </span>
                            </li>
                            <br/>
                            <li class="note-item">
                                <span class="note-title">
                                     面料
                                </span>
                              <span class="note-text">
                                     {{ infor.mianliao }}
                                </span>
                            </li>

                          </ul>

                       </div>

                    </div>

                    <div class="goods-note">

                      <div class="goods-note-title">
                          推荐理由:
                      </div>

                      <div class="goods-note-body">
                          <p>{{infor.sellerpoints}}</p>
                      </div>

                    </div>

                </div>

            </Scroll>

            <goodslist></goodslist>

            <div class="goodsPage-addToList" @click="_AddGoodsShareList">
                加入清单
            </div>

            <div class="goodsPage-prevNextBtn">
               <i class="iconfont jinjin-houtui"></i>
               <i class="iconfont jinjin-qianjin"></i>
            </div>

        </div>

    </div>
</template>
<script>
import _ from "lodash";
import Scroll from "base/scroll/scroll"
import {mapGetters, mapMutations} from "vuex";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getGoods } from "api/goods";
import Bus from "common/js/bus";
import smartPhoto from "smartphoto";
import "swiper/dist/css/swiper.css";
import "smartphoto/css/smartphoto.min.css";
import  goodslist from "./goodsList.vue";

let SMARTPHOTO;
export default {
    data() {
        return {
            swiperList: [],
            swiperOptions:{
                autoplay:3000,
                pagination : '.swiper-pagination',
            },
            infor:{}
        }
    },
    methods:{
        initSmartPhoto(){
            SMARTPHOTO = new smartPhoto(".img-viwer",{
               resizeStyle:"fit"
            })
        },
        destroySmartPhoto(){
           document.querySelector(`div[data-id='${SMARTPHOTO.id}']`).remove();
        },
        _formatData(data){
            let imgList = [];
            ['imgpath','imgpath1','imgpath2','imgpath3','imgpath4'].forEach((key)=>{
                 data[key]?imgList.push(data[key]):null;
            });
            data.imgList = imgList;
            return data;
        },
        goback(Opt){
            window.history.go(-1);
        },
        _AddGoodsShareList(){
          this.addGoodsShareList({
              info:_.cloneDeep(this.infor)
          });
          this.$vux.alert.show({
            title: '提示',
            content: this.$localStore.saveSharelist(this.infor.id)?'加入成功!':"已加入！",
          })
        },
        ...mapMutations({
          "setCommonHeader": "SET_COMMON_HEADER",
          "addGoodsShareList":"ADD_GOODSSHARELIST"
        })
    },
    components: {
        Scroll, swiper, swiperSlide,goodslist
    },
    beforeRouteEnter(to, from, next) {
        // 获得商品id
        let { id } = to.params;
        Bus.$emit("loading-on");
        getGoods({ id }).then((Rs) => {
            next(vm => {
                Rs = vm._formatData(Rs);
                vm.setCommonHeader(4);
                vm.swiperList = Rs.imgList;
                vm.infor = Rs;
                Bus.$emit("loading-off");
                zhuanfa();
            })
        });
    },
    created() {

    },
    mounted(){
      _.delay(()=>{
        this.initSmartPhoto();
      },0)
    },
    beforeRouteLeave(to,from,next){
       this.destroySmartPhoto();
       next(vm =>{})
    }
}
</script>
<style lang="less">
@import "../common/style/helpers/mixins";
.goodsPage{
    .goods-swiper{
        height: 6.4rem;
        width: 100%;
        padding-top: 50px;
        position: relative;
        .img-viwer{
            display: block;
            height: 100%;
            width: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

    .swiper-download{
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid #ccc;
    background-color: #ccc;
    right: 0.2rem;
    top:6.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
      z-index: 10086;

    i{
      font-size: 20px;
      color: #fff;
    }
  }

    .goods-inforBox{
      padding: 0.15rem 0.15rem;

      &-title{
        height: 0.33rem;
        line-height: 0.33rem;
        font-size: 0.26rem;
        font-weight: 600;
        color: #333;
        .omit();
      }

      &-price{
        font-size: 12px;
        padding: 0.02rem 0;
        color: #ff6600;
        font-weight: 500;
        .price-title{

        }
        .price-num{
          font-size: 16px;
          position: relative;
          padding-left: 0.1rem;
          margin-left: 0.1rem;
          &:after{
            content: "￥";
            position: absolute;
            left: -0.15rem;
            top:0.04rem;
            font-size: 12px;
          }
        }
      }

      &-note{
          .note-list{
            display: flex;
            flex-wrap: wrap;
          }
          .note-text{
            color: #ff6600;
          }
          .note-item{
            font-size: 13px;
            padding: 0.1rem 0 0.03rem 0;
            margin-right: 0.25rem;

            &:last-child{
              margin-right: 0;
            }
          }
          .note-title{
            font-weight: 600;
        }
      }
    }

    .goods-note{
      padding: 0 0.15rem 1.5rem 0.15rem;
      font-size: 12px;

      &-title{
        color: #333;
        letter-spacing: 0.01rem;
      }
      &-body{
        p{
          padding: 0.08rem 0;
          color: #666;
        }
      }
    }

     &-prevNextBtn{
        position: absolute;
        width: 5.6rem;
        height: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        bottom: 1.2rem;
        right: 0.4rem;

        .iconfont{
          color: #fe6565;
          font-size: 0.5rem;
        }
     }

    .goodsPage-addToList{
      position: fixed;
      bottom: 0;
      left: 0;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      background: #fe6565;
      color: #fff;
      width: 100%;
      font-size: 0.28rem;
    }
}
</style>
